<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表格</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="/js/popup/inpopup.js"></script>
    <!--<script src="/js/popup/orderpopup.js"></script>-->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <link rel="stylesheet" href="/css/search.css">
    <link rel="stylesheet" href="/css/pager.css">
    <!--<script src="/js/pager.js"></script>-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script th:inline="javascript">
        $(function () {
            $('.action').on("click", function () {
                $('#demoModal .modal-header .modal-title').empty().text($(this).text() + "操作");
                $('#demoModal .modal-body').empty().text("确认进行" + $(this).text() + "操作？");
                $('#demoModal .modal-footer #getStatus').attr("value", $(this).attr('id'));
                $('#demoModal').modal();
            });
        });

        function list(status) {
            if (status == 'all') {
                window.location.replace("/inRepertory/page/1")
            } else {
                window.location.replace("/inRepertory/page/" + status + "/1")
            }
        }

        $(document).ready(function () {
            $('.cab').click(function () {
                document.getElementById('iframeId').src = "/inRepertory/detail/" + $(this).attr('name')
            });
            $('.cad').click(function () {
                //document.getElementById('iframeId').src = "/inRepertory/action/exception?id=" + $(this).attr('name')
            });
        });

        function action() {
            $('#demoModal')
            var status = $('#getStatus').val()
            var ids = [];
            var checked = $('input:checkbox:checked')
            if (0 >= checked.length) {
                alert("请选择您要操作的项目")
                return;
            }
            checked.each(function () {
                ids.push(parseInt($(this).val()));
            });
            $.post("/inRepertory/action/" + status, {list: JSON.stringify(ids)}, function (res) {
                alert("您的操作已提交：成功" + res + "条，失败：" + (ids.length - res) + "条")
                window.location.reload()
            })
        }
    </script>
</head>
<body style="overflow-x:hidden;background:#f3f3f3;">
<div id="mask_shadow"></div>
<script th:inline="javascript">
    $(document).ready(function () {
        var now = [[${status}]]
        $('#my_selcet').val(now)
    });
</script>
<!--/*@thymesVar id="status" type="java.lang.String"*/-->
<!--/*@thymesVar id="page" type="com.github.pagehelper.PageInfo"*/-->
<div><!--/*@thymesVar id="obj" type="com.connext.wms.entity.InRepertory"*/-->
    <div id="goodsList">
        <div class="btn-div">
            <button type="button" class="btn btn-primary" onclick="window.location.reload('${url}+/1')">刷新
            </button>
            <button type="button" value="success" id="success" class="btn btn-primary action">确认收货</button>
            <button type="button" value="fail" id="fail" class="btn btn-primary action">收货失败</button>
            <div class="search-box">
                <form th:action="|/inRepertory/search/${status}/1|" method="get">
                    <select name="my_selcet" id="my_selcet" onchange="list(this.options[this.selectedIndex].value)">
                        <option value="all">全部</option>
                        <option value="wait">待收货</option>
                        <option value="success">收货成功</option>
                        <option value="fail">收货失败</option>
                        <option value="over">超15天未收货</option>
                    </select>
                    <input type="text" name="like" placeholder="请输入单号">
                    <button type="submit" class="btn btn-success">搜索</button>
                </form>
            </div>
        </div>
        <div>
            <table class="table table-condensed">
                <thead>
                <tr>
                    <!--<th>序号</th>-->
                    <th>批量</th>
                    <th>入库单号</th>
                    <th>快递公司</th>
                    <th>快递单号</th>
                    <th>入库单状态</th>
                    <th>同步状态</th>
                    <th>收货仓库</th>
                    <th>创建时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="obj,i:${page.getList()}">
                    <td>
                        <input type="checkbox" th:value="${obj.id}">
                    </td>
                    <td th:text="${obj.inRepoId}"></td>
                    <td th:text="${obj.expressCompany}"></td>
                    <td th:text="${obj.expressId}"></td>
                    <td th:text="#{''+${obj.inRepoStatus}}"></td>
                    <td th:text="#{''+${obj.syncStatus}}"></td>
                    <td th:text="#{''+${obj.receivingRepo}}"></td>
                    <td th:text="${#dates.format(obj.createTime, 'YYYY/MM/dd HH:mm')}"></td>
                    <td>
                        <button type="button" id="detail" th:name="${obj.id}" class="btn btn-default btn-xs cab">详情
                        </button>
                        <button th:if="${obj.inRepoStatus}=='wait'" type="button" id="exception" th:name="${obj.id}"
                                @click="getGoodsList($event)"
                                class="btn btn-danger btn-xs cad"
                                data-toggle="modal" data-target="#demoModal1">异常
                        </button>
                        <button th:if="${obj.inRepoStatus}!='wait'" type="button" id="exception" th:name="${obj.id}"
                                @click="getGoodsList($event)"
                                class="btn btn-danger btn-xs cad"
                                data-toggle="modal" data-target="#demoModal1" disabled>异常
                        </button>
                    </td>
                </tr>

                </tbody>
            </table>
        </div>
        <!--<div v-if="status=='exist'">-->
        <div>
            <div class="modal fade" id="demoModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                 aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="myModalLabel" style="font-size: 16px">收货管理</h4>
                        </div>
                        <div class="modal-body">
                            <form class="form-horizontal refund" role="form">
                                <div class="form-group ">
                                    <!--<label for="fiarstnme" class="col-sm-2 control-label">订单号:</label>-->
                                    <div class="col-sm-10">
                                        <input type="text" id="fiarstnme" style="border:0;"
                                                                     readonly="readonly">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-12">
                                        <table class="table table-condensed">
                                            <thead>
                                            <tr>
                                                <th>商品编码</th>
                                                <th>商品名称</th>
                                                <th>退货数量</th>
                                                <!--<th>商品总价</th>-->
                                            </tr>
                                            </thead>
                                            <template v-for="(i,index) in goodsList">
                                                <tr>
                                                    <td style="text-align: center;">{{i.goodsId}}</td>
                                                    <td style="text-align: center;">{{i.goodsName}}</td>
                                                    <td class="refund" style="text-align: center;">
                                                        <div class="control-btn">
                                                            <div class="control-btn">
                                                                <button type="button" class="subtract"
                                                                        @click="countDown(index)">-
                                                                </button>
                                                                <input type="text" v-model="i.goodsNum" class="txtnum"
                                                                       style="width: 22px;">
                                                                <button type="button" class="plus"
                                                                        @click="countUp(index)">
                                                                    +
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </td>
                                                </tr>
                                            </template>
                                        </table>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <button type="button" class="btn btn-primary save" data-dismiss="modal" id="save"
                                    @click="push">保存
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 弹出框 -->
    <div class="modal fade" id="demoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">title</h4>
                </div>
                <div class="modal-body"></div>
                <div class="modal-footer">
                    <input type="hidden" value="" id="getStatus">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="action()">提交更改</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <div class="footer-pager">
        <span>共<span th:text="${page.pages}"></span>页，当前第<span th:text="${page.pageNum}"></span>页</span>
        <ul class="pagination">
            <li>
                <a th:href="'javascript:go('+${page.pageNum+(-1)}+');'">&laquo;</a>
            </li>
            <li><a th:if="${page.pageNum}>1" th:href="'javascript:go('+${page.pageNum+(-1)}+');'"
                   th:text="${page.pageNum}-1"></a></li>
            <li class="active"><a th:href="'javascript:go('+${page.pageNum}+');'" th:text="${page.pageNum}"></a></li>
            <li><a th:if="${page.pageNum+1}<=${page.pages}" th:href="'javascript:go('+${page.pageNum+1}+');'"
                   th:text="${page.pageNum+1}"></a></li>
            <li th:if="${page.pageNum}==1"><a th:if="${page.pageNum+2}<=${page.pages}"
                                              th:href="'javascript:go('+${page.pageNum+1}+');'"
                                              th:text="${page.pageNum+2}"></a></li>
            <li><a th:href="'javascript:go('+${page.pageNum+1}+');'">
                &raquo;</a>
            </li>
        </ul>
    </div>
    <script th:inline="javascript">
        function go(currPage) {
            if ([[${like}]] != null && [[${like}]] != 'null') {
                window.location.replace([[${url}]] + "/" + currPage + "?like=" + [[${like}]])
            } else {
                window.location.replace([[${url}]] + "/" + currPage)
            }
        }
    </script>
    <div id="popup" class="popup">
        <div class="title">
            <p>入库单详情</p>
            <span></span>
            <span>x</span>
        </div>
        <div class="cont">
            <iframe src="" scrolling="auto" id="iframeId" style="width:100%;height:100%;border:0px;"></iframe>
        </div>
    </div>
    <script>
        $(function () {
            $('#popup').popup();
            $("body").css("overflow-y", "hidden");
        });
    </script>
</div>
</body>
</html>
<script>
    var model = new Vue({
        el: '#goodsList',
        data: {
            id: '',
            goodsList: [],
            oldList: [],
        },
        methods: {
            countDown(index) {
                if (this.goodsList[index].goodsNum > 0) {
                    this.goodsList[index].goodsNum--
                }
            },
            countUp(index) {
                this.goodsList[index].goodsNum++
            },
            getGoodsList(e) {
                var iii = this
                this.id = $(e.srcElement).attr('name')
                axios.post('/inRepertory/detail/' + iii.id, {})
                    .then(function (response) {
                        iii.goodsList = response.data;
                        iii.oldList = response.data;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            push() {
                var iii = this
                axios.post('/inRepertory/action/exception/' + iii.id, JSON.stringify(iii.goodsList), {
                        headers: {'Content-Type': 'application/json'}
                    },
                )
                    .then(function (response) {
                        if (response.data) {
                            alert("操作成功")
                            window.location.reload(true)
                        } else {
                            alert("操作失败")
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }
        }
    })
</script>